/**
 * inline: true
 */
import * as SunnyIcons from '@mao-fu/sun-ui-icon';
import copy from 'copy-to-clipboard';
import React, { useCallback, useState } from 'react';
import { Button, Space } from '@mao-fu/sun-ui';
import { categories, replaceIconThemeStr } from './fields';
import { useStyles } from './style';

/** 图标主题类型 */
enum ThemeType {
  Filled = 'Filled',
  Outlined = 'Outlined',
}

interface IconSearchState {
  theme: ThemeType;
  searchKey: string;
}

const themeOptions = [
  {
    value: ThemeType.Outlined,
    // icon: <Icon component={OutlinedIcon} />,
    label: '线框风格',
  },
  {
    value: ThemeType.Filled,
    // icon: <Icon component={FilledIcon} />,
    label: '实底风格',
  },
];

const App: React.FC = () => {
  const [displayState, setDisplayState] = useState<IconSearchState>({
    searchKey: '',
    theme: ThemeType.Outlined,
  });

  const classes = useStyles();

  const renderIconList = useCallback(() => {
    const { searchKey = '', theme } = displayState;

    // 找出该主题下的所有图标
    // 根据关键字过滤图标
    const filteredIcons = Object.entries(SunnyIcons).filter(([key]) => {
      return (
        key.includes(theme) &&
        (searchKey ? key.toLowerCase().includes(searchKey.toLowerCase()) : true)
      );
    });

    // 分类显示图标
    const group: Record<string, { iconName: string; icon: React.FC }[]> =
      Object.entries(categories).reduce(
        (acc, val) => {
          const [categoryName, categoryIcons] = val;

          for (const iconName of categoryIcons) {
            const icon = filteredIcons.find(
              (item) => replaceIconThemeStr(item[0]) === iconName,
            );
            if (icon) {
              if (!acc[categoryName]) {
                acc[categoryName] = [];
              }
              acc[categoryName].push({
                iconName: icon[0],
                icon: icon[1] as React.FC,
              });
            }
          }

          return acc;
        },
        {} as typeof group,
      );

    // 渲染图标
    return (
      <Space direction="vertical" align="start">
        {Object.entries(group).map(([key, value]) => (
          <Space key={key} direction="vertical" align="start">
            <h2>{key}</h2>
            <Space wrap>
              {value.map((Icon) => (
                <div
                  className={classes.iconItem}
                  key={Icon.iconName}
                  onClick={() => {
                    copy(Icon.iconName);
                    window.alert(`${Icon.iconName} 已复制到剪贴板`);
                  }}
                >
                  {React.createElement(Icon.icon)}
                </div>
              ))}
            </Space>
          </Space>
        ))}
      </Space>
    );
  }, [displayState, classes]);

  return (
    <div className={classes.iconListContainer}>
      <Space>
        {themeOptions.map((option) => (
          <Button
            key={option.value}
            onClick={() =>
              setDisplayState({ ...displayState, theme: option.value })
            }
          >
            {option.label}
          </Button>
        ))}

        <input
          className={classes.searchInput}
          type="text"
          placeholder="搜索图标"
          value={displayState.searchKey}
          onChange={(e) =>
            setDisplayState({ ...displayState, searchKey: e.target.value })
          }
        />
      </Space>
      {renderIconList()}
    </div>
  );
};

export default App;
